<template>
  <el-row class="navTitle">
    <el-col :span="1">&nbsp;</el-col>
    <el-col :span="22" class="titleBox">
      <el-breadcrumb separator="·" class="title">
        <span class="homeImg iconfont">
          &#xe60e;
        </span>
        <el-breadcrumb-item 
        v-for="items in pageType" 
        class="titleMsg" 
        :key="items">
          {{items}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="1">&nbsp;</el-col>
  </el-row>
</template>
<script>
  export default{
    props: ['pageType'],
    data () {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style lang='less'>
  @orangeStyle:#f7931e;
  .navTitle{
    .titleBox{
    height: 3.125rem;
    text-align: left;
    line-height:3.125rem;
    }
    .title{
      display: block;
      height:100%;
      text-align: left;
      line-height:3.125rem;
    }
    .el-row{
      margin-top: 0;
    }
    .titleMsg:last-child{
      color: #f7931e;
    }
    .titleMsg:last-child i{
      display: none;
    }
    .title .homeImg{
      width: 16px;
      height:16px;
      float: left;
      margin-right: 5px;
    }
    .title .homeImg img{
      width: 100%;
      float: left;
      margin-top: 1.125rem;
    }
    .el-breadcrumb__item{
      font-size: 1rem;
      .el-breadcrumb__item__inner a:hover, .el-breadcrumb__item__inner:hover{
        color:black;
      }
      &:last-child .el-breadcrumb__item__inner, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover{
        color:@orangeStyle;
      }
    }
  }
</style>
